<template>
  <view>

    <!-- #ifdef APP-PLUS || MP-WEIXIN -->
    <!--		<u-navbar title="我要入驻" back-icon-color="#000" :is-back="true" title-color="#000"-->
    <!--			:background="{ background:'#FFFFFF'}" :border-bottom="false"></u-navbar>-->
    <!-- #endif -->

    <view class="page_bg">
      <image :src="BestImgUrl + 'home/rz (2).png'" style="width: 750rpx;height: 300rpx;z-index: -1"></image>
    </view>
    <view style="text-align: center;font-weight: 400;font-size: 28rpx;color: #FFFFFF;line-height: 72rpx;position: relative;margin: 30rpx">领食惠探店</view>
    <view style="text-align: center;font-weight: 400;font-size: 52rpx;color: #FFFFFF;line-height: 72rpx;position: relative;margin: 0 30rpx 30rpx">仅需3步即可入驻</view>
    <view class="u-flex" style="background-color: #FFFFFF;border-radius: 20rpx;margin: 30rpx 20rpx;padding: 30rpx;position: relative">
      <view style="text-align: center;flex: 1">
        <image :src="BestImgUrl + 'home/rz (3).png'" style="width: 72rpx;height: 52rpx"></image>
        <view style="font-size: 26rpx;
color: #3D3D3D;
line-height: 36rpx;">意向选择</view>
        <view style="font-size: 24rpx;
color: #AAAAAA;
line-height: 34rpx;">选择入驻类型</view>
      </view>
      <view style="text-align: center;flex: 1">
        <image :src="BestImgUrl + 'home/rz (4).png'" style="width: 72rpx;height: 52rpx"></image>
        <view style="font-size: 26rpx;
color: #3D3D3D;
line-height: 36rpx;">提交信息</view>
        <view style="font-size: 24rpx;
color: #AAAAAA;
line-height: 34rpx;">填写店铺信息</view>
      </view>
      <view style="text-align: center;flex: 1">
        <image :src="BestImgUrl + 'home/rz (1).png'" style="width: 72rpx;height: 52rpx"></image>
        <view style="font-size: 26rpx;
color: #3D3D3D;
line-height: 36rpx;">等待联系</view>
        <view style="font-size: 24rpx;
color: #AAAAAA;
line-height: 34rpx;">一对一专属客服</view>
      </view>
    </view>

    <view class="content_wrap">

      <!-- <view class="top_bg_title">
        <image :src="BestImgUrl+'rztoptu.png'" mode="widthFix"></image>
      </view> -->

<!--      			<view class="top_box">
      				<view class="top_box_wrap">
      					<view class="top_box_title">10万+用户，助你打造爆款店铺</view>

      					<view class="shijianzhou">
      						<view>
      							<u-time-line>
      								<u-time-line-item nodeTop="10">
      									&lt;!&ndash; 此处自定义了左边内容，用一个图标替代 &ndash;&gt;
      									<template v-slot:node>
      										<view class="u-node" style="background: #FF8613;"></view>
      									</template>
      									<template v-slot:content>
      										<view>
      											<view class="u-order-title">获取更多用户</view>
      											<view class="u-order-desc">提高门店下单率/复购率</view>
      										</view>
      									</template>
      								</u-time-line-item>
      								<u-time-line-item nodeTop="10">
      									&lt;!&ndash; 此处自定义了左边内容，用一个图标替代 &ndash;&gt;
      									<template v-slot:node>
      										<view class="u-node" style="background: #FF8613;"></view>
      									</template>
      									<template v-slot:content>
      										<view>
      											<view class="u-order-title">增加销量</view>
      											<view class="u-order-desc">推广完稳定增加30%销量</view>
      										</view>
      									</template>
      								</u-time-line-item>
      								<u-time-line-item nodeTop="10">
      									&lt;!&ndash; 此处自定义了左边内容，用一个图标替代 &ndash;&gt;
      									<template v-slot:node>
      										<view class="u-node" style="background: #FF8613;"></view>
      									</template>
      									<template v-slot:content>
      										<view>
      											<view class="u-order-title">提升行业排名</view>
      											<view class="u-order-desc">提升排名/提升店铺曝光率</view>
      										</view>
      									</template>
      								</u-time-line-item>
      								<u-time-line-item nodeTop="10">
      									&lt;!&ndash; 此处自定义了左边内容，用一个图标替代 &ndash;&gt;
      									<template v-slot:node>
      										<view class="u-node" style="background: #FF8613;"></view>
      									</template>
      									<template v-slot:content>
      										<view>
      											<view class="u-order-title">优化评价</view>
      											<view class="u-order-desc">降低平台推广成本</view>
      										</view>
      									</template>
      								</u-time-line-item>
      							</u-time-line>
      						</view>
      						<view class="tupianzhou">
      							<image :src="BestImgUrl + '5b8-omzefv1.png'" mode="widthFix"></image>
      						</view>
      					</view>

      				</view>

      			</view>-->

      <view class="input_box">
        <view class="input_box_head" :class="isTabs ? 'Tabs-left' : 'Tabs-right'">
          <u-tabs
              :list="Tabslist"
              :is-scroll="false"
              :current="TabsCurrent"
              @change="Tabschange"
              bg-color="none"
              active-color="#3d3d3d"
              :bar-style="{backgroundColor: '#FF7900'}"
              bar-height="8"
              bar-width="40"
              font-size="32"
              inactive-color="#888888"></u-tabs>
          <view class="input_box_head_text">吸引用户到店消费，帮助商家<text style="color: #FF7C00">补充门店客流</text></view>
        </view>
        <view class="input_content">
          <view class="input_box_item">
            <view class="titme"><span>*</span>商品门店名称</view>
            <view class="dizhi">
              <u-input v-model="shopname" type="text" input-align="right" :border="false"
                       placeholder="请输入店铺名称"/>
            </view>
          </view>
          <u-line color="#F1F1F1"></u-line>
          <view class="input_box_item">
            <view class="titme"><span>*</span>详细地址</view>
            <view class="dizhi">
              <u-input v-model="shopaddres" type="text" input-align="right" :border="false"
                       placeholder="请输入详细地址"/>
            </view>
          </view>
          <u-line color="#F1F1F1"></u-line>
          <view class="input_box_item">
            <view class="titme"><span>*</span>联系电话</view>
            <view class="dizhi">
              <u-input v-model="phone" type="number" maxlength="11" input-align="right" :border="false"
                       placeholder="请输入联系电话"/>
            </view>
          </view>
          <u-line color="#F1F1F1"></u-line>
          <view class="input_box_item">
            <view class="titme"><span>*</span>门店品牌</view>
            <view class="dizhi">
              <u-input v-model="contacts" type="text" input-align="right" :border="false"
                       placeholder="请输入门店品牌"/>
            </view>
          </view>
          <u-line color="#F1F1F1"></u-line>
        </view>
        <view class="oktijiao">
          <view class="lhb_btn3" @click="submitto()">提交入驻信息</view>
        </view>
      </view>
    </view>

    <view class="applyImg">
      <view class="applyImg_head">
        <u-tabs
            :list="Tabslist2"
            :is-scroll="false"
            :current="TabsCurrent2"
            @change="Tabschange2"
            bg-color="none"
            active-color="#3d3d3d"
            :bar-style="{backgroundColor: '#FF7900'}"
            bar-height="8"
            bar-width="40"
            font-size="32"
            inactive-color="#888888"></u-tabs>
      </view>
      <view class="applyImg_cont">
        <image v-if="tabsindex === 0 && TabsCurrent == 0" :src="BestImgUrl + 'shop/apply-sjrz.png'" style="width: 710rpx;height: 1430rpx;"></image>
        <image v-if="tabsindex === 0 && TabsCurrent == 1" :src="BestImgUrl + 'shop/apply-sjrz2.png'" style="width: 710rpx;height: 1430rpx;"></image>
        <view v-if="tabsindex === 1" class="applyImg_case">
          <view class="case_cont_title">
            <view class="case_cont_t">01</view>
            <view class="case_cont_b">优质商家展示</view>
          </view>
          <view class="case_content">
            <view class="case_item" v-for="(item, index) in 10" :key="index">
              <view class="case_item_img"><image :src="BestImgUrl + 'shop/shop_logo.png'" class="case_item_image"></image></view>
              <view class="case_item_cont">
                <view class="case_item_warp">
                  <view class="case_item_t">
                    <text class="case_txt" style="font-size: 32rpx;color: #3D3D3D;font-weight: bold;">75%</text>
                    <text class="case_txt">评分提升</text>
                  </view>
                  <view class="case_item_t">
                    <text class="case_txt" style="font-size: 32rpx;color: #3D3D3D;font-weight: bold;">8000元</text>
                    <text class="case_txt">推广节约</text>
                  </view>
                </view>
                <view class="case_cont_btn">
                  <view class="case_cont_btn_text">去看看</view>
                </view>
              </view>
            </view>
          </view>
          <view class="case_cont_title">
            <view class="case_cont_t">02</view>
            <view class="case_cont_b">餐饮合作商户</view>
          </view>
          <view class="case_content">
            <view class="case_img_cont">
              <view v-for="(item, index) in 8" :key="index" class="case_img_item">
                <image :src="BestImgUrl + 'shop/shop_logo.png'" class="case_img_item_image"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view style="height: 30rpx"></view>

  </view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      BestImgUrl: app.globalData.imgurlBwc,
      shopname: '',
      shopaddres: '',
      contacts: '',
      phone: '',
      Tabslist: [ //tabs列表
        {
          name: '0元探店入驻',
          id: 1
        },
        {
          name: '霸王餐入驻',
          id: 2
        },
      ],
      TabsCurrent: 0, //tabs当前选中
      isTabs: true, //tabs是否选中
      Tabslist2: [ //tabs2列表
        {
          name: '商家入驻介绍',
          id: 1
        },
        {
          name: '商家入驻案例',
          id: 2
        },
      ],
      tabsindex: 0, //tabs是否选中
      TabsCurrent2: 0,
    }
  },
  methods: {
    submitto() {
      let that = this
      if (that.shopname == '') {
        uni.showToast({
          title: '请输入店铺名称',
          icon: 'none',
          duration: 2000
        });
      } else if (that.shopaddres == '') {
        uni.showToast({
          title: '请输入店铺地址',
          icon: 'none',
          duration: 2000
        });
      } else if (that.contacts == '') {
        uni.showToast({
          title: '请输入联系人',
          icon: 'none',
          duration: 2000
        });
      } else if (that.phone == '') {
        uni.showToast({
          title: '请输入联系电话',
          icon: 'none',
          duration: 2000
        });
      } else {
        that.$api.shopsruzhu({
          store_name: that.shopname, //	是	string	店铺名称
          address: that.shopaddres, //	是	string	店铺地址
          contacts: that.contacts, //	是	string	联系人姓名
          tel: that.phone, //	是	string	联系人电话
        }).then(res => {
          //uni.showToast({
          //	title: res.data.msg,
          ////	icon: 'none',
          //	duration: 2000
          //});
          that.shopname = ''
          that.shopaddres = ''
          that.contacts = ''
          that.phone = ''

          setTimeout(() => {
            uni.navigateTo({
              url: '/subpackageB/pages/businessApply/Applyok',
              animationType: 'pop-in'
            })
          }, 500)

        }).catch(err => {
          uni.showToast({
            title: err.data.msg,
            icon: 'none',
            duration: 2000
          });
        })
      }

    },
    Tabschange(item){
      // console.log('选中==',  item)
      this.TabsCurrent = item.index;
      if (item.index === 0) {
        this.isTabs = true
      } else {
        this.isTabs = false
      }
    },
    Tabschange2(item){
      console.log('选中==',  item)
      this.TabsCurrent2 = item.index;
      this.tabsindex = item.index
    }
  }
}
</script>

<style lang="scss">
page {
  background-image: linear-gradient(180deg, #F5F4F2, #F5F4F2);
  height: 100%;
}

.u-time-axis::before {
  border-left: 1px solid #FF8613 !important;
}

.shijianzhou {
  margin-top: 40rpx;
  padding: 0 0 0 20rpx;
  display: flex;
  align-items: center;
  position: relative;

  .tupianzhou {
    position: absolute;
    right: 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 260rpx;
    }
  }
}

.u-node {
  width: 20rpx;
  height: 20rpx;
  border-radius: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d0d0d0;
}

.u-order-title {
  color: #333333;
  font-weight: bold;
  font-size: 28rpx;
}

.u-order-desc {
  color: rgb(150, 150, 150);
  font-size: 24rpx;
  margin-bottom: 6rpx;
}

.u-order-time {
  color: rgb(200, 200, 200);
  font-size: 26rpx;
}


.page_bg {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 500rpx;
  //background-color: #FF8613;
  //border-radius: 0 0 100rpx 100rpx;
}

.ld_img1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100rpx;
  z-index: 2;
}

.ld_img2 {
  position: absolute;
  top: 0;
  right: 0;
  width: 100rpx;
  z-index: 2;
}

.ld_img3 {
  position: absolute;
  top: 140rpx;
  right: 0;
  width: 100rpx;
  z-index: 2;
}

.ruzhu_bg {
  padding: 50rpx;
  text-align: center;
  position: relative;
  z-index: 3;

  image {
    width: 100%;
    margin-top: 50rpx;
  }
}

.oktijiao {
  width: 90%;
  margin: 0 auto;
  padding: 20rpx 0;
}

.lhb_btn3 {
  margin-top: 30rpx;
  background-image: linear-gradient(to right, #FF7900, #FF7900);
  border-radius: 200rpx;
  text-align: center;
  padding: 20rpx 30rpx;
  color: #ffffff;
  font-size: 32rpx;
}

.input_box {
  background-color: #ffffff;
  width: 710rpx;
  margin: 30rpx 20rpx;
  border-radius: 20rpx;
  overflow: hidden;
  .input_box_head{
    padding-bottom: 10rpx;
    .input_box_head_text{
      width: 90%;
      background: #FBF3E8;
      margin: 10rpx auto 0;
      text-align: center;
      line-height: 72rpx;
      font-size: 24rpx;
      border-radius: 8rpx
    }
  }
  .Tabs-left{
    background: #FFF4EA url("https://td.lszbg.com/public/uploads/h5/shop/business-apply-tab-bg.png");
    background-size: 100% 100%;
  }
  .Tabs-right{
    background: #FFF4EA url("https://td.lszbg.com/public/uploads/h5/shop/business-apply-tab-bg2.png");
    background-size: 100% 100%;
  }
  .input_content{
    padding: 0 30rpx;
    .input_box_item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 30rpx;
      padding-bottom: 20rpx;
      .titme {
        span {
          font-size: 30rpx;
          color: #FF8612;
        }
      }

      .dizhi {
        background-color: #ffffff;

      }
    }
  }

}

.content_wrap {
  position: relative;
  z-index: 5;
}
.applyImg{
  width: 100%;
  padding: 0 20rpx;
  margin-bottom: 20rpx;
  .applyImg_head{
    padding: 16rpx 0;

  }
  .applyImg_cont{
    background: linear-gradient( 180deg, #FFF6EE 0%, #FFFFFF 150rpx);
    border-radius: 32rpx;
    .applyImg_case{
      padding: 30rpx 15rpx;

      .case_cont_title{
        padding-bottom: 40rpx;
        text-align: center;
        .case_cont_t{
          color: #FF7A01;
          font-size: 48rpx;
          font-weight: bold;
          line-height: 68rpx;
        }
        .case_cont_b{
          color: #3D3D3D;
          font-size: 30rpx;
          line-height: 42rpx;
        }
      }
      .case_content{
        width: 100%;
        // 优质商家展示css
        .case_item{
          width: 50%;
          display: inline-block;
          padding: 0 15rpx;
          position: relative;
          .case_item_img{
            position: absolute;
            left: 0;
            right: 0;
            margin: 0 auto;
            z-index: 10;
            .case_item_image{
              width: 130rpx;
              height: 130rpx;
              margin: 0 auto;
              display: block;
              border-radius: 50%;
              border: 10rpx solid #FFFFFF;
            }
          }
          .case_item_cont{
            width: 100%;
            background: #F7F7F7;
            border-radius: 20rpx;
            padding-top: 90rpx;
            margin-top: 70rpx;
            margin-bottom: 30rpx;
            .case_item_warp{
              padding: 20rpx 0;
              display: flex;
              .case_item_t{
                width: 50%;
                text-align: center;
                .case_txt{
                  display: block;
                  font-size: 24rpx;
                  padding: 6rpx 0;
                }
              }
            }
            .case_cont_btn{
              padding: 10rpx 0 30rpx;
              .case_cont_btn_text{
                width: 160rpx;
                height: 52rpx;
                line-height: 52rpx;
                font-size: 26rpx;
                color: #FFFFFF;
                text-align: center;
                margin: 0 auto;
                background: linear-gradient( 93deg, #FF891E 0%, #FFA049 100%);
                border-radius: 30rpx;
              }
            }
          }
        }
        // 餐饮合作商户css
        .case_img_cont{
          width: 100%;
          .case_img_item{
            width: 25%;
            padding: 0 15rpx;
            margin: 15rpx 0;
            display: inline-block;
            .case_img_item_image{
              width: 140rpx;
              height: 140rpx;
              margin: 0 auto;
              display: block;
              border-radius: 20rpx;
            }
          }
        }
      }
    }
  }
}
.top_bg_title {
  padding: 34rpx 30rpx 0 30rpx;

  image {
    width: 397.34rpx;
  }
}

.top_box {
  padding: 30rpx 30rpx 0 30rpx;

  .top_box_wrap {
    background-color: #ffffff;
    border-radius: 20rpx;
    padding: 30rpx 30rpx 0 30rpx;

    .top_box_title {
      font-weight: bold;
      font-size: 36rpx;
      color: #000;
    }
  }

}
</style>